<template>
	<view class="body-box" v-if="serviceData._id">
		<view class="state-bar" v-if="serviceData.state==1" style="padding-right: 32rpx;">
			<image src="/static/icons/u4963.png" mode=""
				style="height: 80rpx;width: 80rpx;margin-top: 50rpx;margin-bottom: 28rpx;"></image>
			医生审核中
		</view>
		<view class="state-bar" v-if="serviceData.state==2">
			<image src="/static/icons/u4963.png" mode=""
				style="height: 80rpx;width: 80rpx;margin-top: 50rpx;margin-bottom: 28rpx;"></image>
			审核通过，等待服务
		</view>
		<view class="state-bar" v-if="serviceData.state==3">
			<image src="/static/icons/u4418.png" mode=""
				style="height: 80rpx;width: 80rpx;margin-top: 50rpx;margin-bottom: 28rpx;"></image>
			服务已完成
		</view>
		<view class="state-bar" v-if="serviceData.state==0" style="height: 378rpx;">
			<image src="/static/icons/u5207.png" mode=""
				style="height: 80rpx;width: 80rpx;margin-top: 50rpx;margin-bottom: 28rpx;"></image>
			申请服务失败
			<text
				style="font-size: 26rpx;line-height: 48rpx;color: #999;margin-top:15rpx ;display: inline-block;width: 686rpx;">您的服务申请审核未通过，原因：日程冲突，请重新服务选择时间</text>
		</view>
		<view class="state-bar" v-if="serviceData.state==4" style="height: 378rpx;">
			<image src="/static/icons/jinggao.png" mode=""
				style="height: 80rpx;width: 80rpx;margin-top: 50rpx;margin-bottom: 28rpx;"></image>
			服务已取消

		</view>
		<view class="doctor-bar">
			<image :src="serviceData.doctorId?.avatar" mode=""></image>
			<view class="message-bar">
				<view class="name-bar"> {{serviceData.doctorId?.name}}<text
						style="font-size: 28rpx;color: #999;margin-left: 12rpx;">全科医生</text></view>
				<text>{{'所属机构：'+serviceData.organizationId?.name}}</text>
				<text>{{'所属团队：'+serviceData.teamId?.name}}</text>
				<text>服务次数：<text style="color:#2984F8">{{serviceData.doctorId?.signNumber}}</text></text>
			</view>
		</view>
		<view class="service-bar">
			<view class="message-item" style='display: flex;align-items: center;'>
				<view class="message-title">服务单号</view>
				<view class="messageInfo">{{serviceData._id}}</view>
			</view>
			<view class="message-item" style='display: flex;align-items: center;'>
				<view class="message-title">申请人</view>
				<view class="messageInfo">{{serviceData.residentId?.name}}</view>

			</view>
			<view class="message-item" style='display: flex;align-items: center;'>
				<view class="message-title">服务包</view>
				<view class="messageInfo">{{serviceData.servicePackId?.name}}</view>

			</view>
			<view class="message-item" style='display: flex;align-items: center;'>
				<view class="message-title" style="display: flex;align-items: center;">服务项目</view>
				<view class="messageInfo">{{serviceData.serviceItemIds?.map(item=>item.name).join('')}}</view>

			</view>
			<view class="message-item" style='display: flex;align-items: center;'>
				<view class="message-title">服务地点</view>
				<view class="messageInfo">{{serviceData.place}}</view>

			</view>
			<view class="message-item" style='display: flex;align-items: center;'>
				<view class="message-title">服务时间</view>
				<view class="messageInfo">{{serviceData.time}}</view>

			</view>
			<view class="message-item" style='display: flex;align-items: center;'>
				<view class="message-title">备注</view>
				<view class="messageInfo">{{serviceData.remark}}</view>

			</view>
			<view class="message-item" style='display: flex;align-items: center;'>
				<view class="message-title">提交时间</view>
				<view class="messageInfo">{{serviceData.time}}</view>

			</view>
			<view class="message-item" style='display: flex;align-items: center;'>
				<view class="message-title">审核时间 </view>
				<view class="messageInfo">{{serviceData.time}}</view>

			</view>
		</view>

		<!-- 服务完成 -->
		<view class="service-bar" v-if="serviceData.state==3">
			<view class="message-item" style='display: flex;align-items: center;height: 100rpx;'>
				<view class="message-title" style="color: #FBBD78;font-size: 32rpx;">服务详情</view>

			</view>
			<view class="message-item" style='display: flex;align-items: center;'>
				<view class="message-title">血压</view>
				<view class="messageInfo">{{serviceData.bloodPressure+'mmHg'}}</view>

			</view>
			<view class="message-item" style='display: flex;align-items: center;'>
				<view class="message-title">空腹血糖</view>
				<view class="messageInfo">{{serviceData.bloodSugar + 'mmol/L'}}</view>

			</view>
			<view class="message-item" style='display: flex;align-items: center;'>
				<view class="message-title" style="display: flex;align-items: center;">心率</view>
				<view class="messageInfo">{{serviceData.heartRate}}</view>

			</view>
			<view class="message-item" style='display: flex;align-items: center;'>
				<view class="message-title">病情描述</view>
				<view class="messageInfo">{{serviceData.description}}</view>

			</view>
			<view class="message-item" style='display: flex;align-items: center;'>
				<view class="message-title">健康指导</view>
				<view class="messageInfo">{{serviceData.guidance}}</view>

			</view>

		</view>

	</view>

	<!-- <view v-else style="display: flex;justify-content: center;width: 750rpx;height: 100vh;">
<text></text>
	</view> -->

	<view class="footer-bar" style="background-color: rgba(242, 242, 242, 1);">
		<view class="submit" v-if="serviceData.state==2" @click="deleteService">取消预约</view>
		<view class="submit" v-if="serviceData.state==1" @click="deleteService">取消预约</view>
		<view class="submit" v-if="serviceData.state==0" @click="toApplyService">重新申请</view>
		<view class="submit" v-if="serviceData.state==3" @click="toComment">服务评价</view>
		<view
			style="color: #999;font-size: 48rpx;height: 160rpx;line-height: 160rpx;text-align: center;font-weight: 450;"
			v-if="serviceData.state==4">服务已取消</view>
	</view>



</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		getserviceFullDetailApi,
		updateServiceStateApi
	} from '../../../api/service';

	const serviceId = ref('')

	onLoad((options) => {
		getService(options._id)
		serviceId.value = options._id
	})

	const serviceData = ref({})
	// 获取服务详情
	function getService(data) {
		getserviceFullDetailApi({
				_id: data
			})
			.then(res => {
				if (res.code == 200) {
					serviceData.value = res.data
				}
			})
	}

	// 跳转评价
	function toComment() {
		uni.navigateTo({
			url: `/serviceStep/pages/serviceComment/serviceComment?_id=${serviceData.value?._id}`
		})
	}

	// 删除服务
	function deleteService() {
		updateServiceStateApi({
			serviceId: serviceId.value,
			state: 4
		})
		uni.navigateBack()
	}

	// 跳转服务
	function toApplyService() {
		uni.navigateTo({
			url: `/minePackage/pages/ApplyForServices/ApplyForServices?_id=${serviceId.value}`
		})
	}
</script>

<style scoped>
	.body-box {
		background-color: rgba(242, 242, 242, 1);
		min-height: 100vh;
		width: 750rpx;
		position: relative;
		padding-bottom: 160rpx;

	}

	.state-bar {
		height: 260rpx;
		width: 750rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		font-size: 40rpx;
		color: #333;
		font-weight: 400;
		margin-bottom: 20rpx;
		line-height: 40rpx;
		background-color: #fff;
		text-align: center;
	}

	.state-bar img {
		height: 80rpx;
		width: 80rpx;
		margin-top: 80rpx;
		margin-bottom: 40rpx;
		margin: 0 auto;
		border-radius: 16rpx;
	}

	.doctor-bar {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		height: 308rpx;
		width: 750rpx;
		background-color: #fff;
		padding: 0 32rpx;
		padding-right: 32rpx;
	}

	.doctor-bar image {
		width: 220rpx;
		height: 220rpx;
		border-radius: 12rpx;
		margin-right: 24rpx;
	}

	.message-bar {
		display: inline-block;
		display: flex;
		flex-direction: column;

	}

	.name-bar {
		display: inline-block;
		font-size: 36rpx;
		color: #333;
		line-height: 36rpx;
		margin-bottom: 15rpx;
	}

	.message-bar>text {
		margin-bottom: 25rpx;
		font-size: 24rpx;
		color: #999;
		display: inline-block;

	}

	.service-bar {
		min-height: 916rpx;
		width: 750rpx;
		padding: 20rpx 32rpx 0;
		background-color: #fff;
		display: flex;
		flex-direction: column;

		margin-bottom: 20rpx;
	}

	.message-item {
		height: 88rpx;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		font-size: 28rpx;
		color: #999;
		font-weight: 400;
	}

	.message-title {
		width: 162rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #999;
		font-weight: 400;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		white-space: nowrap;
	}

	.messageInfo {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #333;
		margin-left: 32rpx;
	}

	.footer-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 160rpx;
		width: 750rpx;
		background-color: (242, 242, 242, 1);
		display: flex;
		justify-content: center;
		padding-top: 20rpx;
	}

	.submit {
		width: 686rpx;
		height: 88rpx;
		background-color: rgba(41, 132, 248, 1);
		border: none;
		border-radius: 16rpx;
		font-size: 32rpx;
		color: #fff;
		font-weight: 450;
		display: flex;
		align-items: center;
		justify-content: center;

	}
</style>